
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>集中考试</title>
<link rel="icon" href="image/网页图标.png" type="image/x-icon">
<link href="css/main.css" rel="stylesheet" type="text/css" />
  <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
  <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
  <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
  <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
  <script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jzkszx.js"></script>
<script>
function MaxMe(o) {
	if (window.navigator.userAgent.indexOf("Firefox") > -1) {
		o.style.height = o.scrollTop + o.scrollHeight + "px";
	}
	else {
		if (o.scrollTop > 0) o.style.height = o.scrollTop + o.scrollHeight + "px";
	}
}
</script>

  <style>
    #countdown {
      font-size: 20px;
      color: red;
    }
    .red{
      background-color: red;
    }
    .green{
      background-color: green;
    }
  </style>


</head>
<body>
<div id="app">
<div>
  <div class="toplogo">
    <div class="mainbox box-center pt15">
      <div class="logo left" style="margin-top: 9px"><a><span id="title" style="color: #333333">{{paper.title}}</span></a></div>
    </div>
  </div>
  <div class="clearfix"></div>
  <div class="mainbox box-center"> 
    
    <!--左侧-->
    <div class="side_l left"> 
      <!--信息-->
      <div class="col-l-01 box-shadow-ie-r"> <b class="b1"></b><b class="b2"></b><b class="b3 "></b>
        <div class=" bc bc-h01  box-shadow"><a><img :src="image" id="imgurl" class="border p3 m5 left" width="70" height="80" /></a>
          <div class="text-left m5 col-r-03 right">
            <p>学员姓名：<span id="stuname">{{classinfo.sayname}}</span></p>
            <p>卷面总分：<span id="totalscore">{{paper.scoreTotal}}</span>分</p>
            <p>答题时间：<span id="examtime">{{paper.time}}</span>分钟</p>
            <p>结束时间：<span id="examendtime">{{examEndTime}}</span>分</p>
          </div>
        </div>
        <b class="b3"></b><b class="b2"></b><b class="b1 "></b> </div>
      <!--序号-->
      <div class="col-l-02 box-shadow-ie-r mt20 bc-h02  "> <b class="b1"></b><b class="b2"></b><b class="b3 "></b>
        <div class=" bc  box-shadow p10">
          <div id="testnum" class="xuhao">
            <h4>一、填空题</h4>
            <a v-for="(q, index) in tk" :class="{red: q.tf == 0, green: q.tf == 1}" :href="'#a' + q.qid" :id="'num' + q.qid">{{index + 1}}</a>
            <div class="clearfix"></div>
            <h4>二、单选题</h4>
            <a v-for="(q, index) in dk" :class="{red: q.tf == 0, green: q.tf == 1}" :href="'#' + q.qid" :id="'num' + q.qid">{{index + 1}}</a>
            <div class="clearfix"></div>
            <h4>三、多选题</h4>
            <a v-for="(q, index) in dxs" :class="{red: q.tf == 0, green: q.tf == 1}" :href="'#' + q.qid" :id="'num' + q.qid">{{index + 1}}</a>
            <div class="clearfix"></div>
            <h4>四、判断题</h4>
            <a v-for="(q, index) in pd" :class="{red: q.tf == 0, green: q.tf == 1}" :href="'#' + q.qid" :id="'num' + q.qid">{{index + 1}}</a></div>
        </div>
        <b class="b3"></b><b class="b2"></b><b class="b1 "></b> </div>
    </div>
    <!--右侧--> 
    <!--题-->
    <div class="col-r-01 box-shadow-ie-r mt10 right"><b class="b1"></b><b class="b2"></b><b class="b3 "></b>
      <div id="Content" class=" bc bc-h04  box-shadow p10"><b class="b1 bb1"></b><b class="b2 bb2"></b><b class="b3 bb2"></b>

<!--        填空题-->
        <div class="bc bb2">
          <div class="bt bb3 bc-h03">第一部分：  填空题（每题{{paper.tk}}分,共{{paper.tk * tk.length}}分）</div>
        </div>
        <b class="b3 bb2"></b><b class="b2 bb2"></b><b class="b1 bb1"></b>
        <div v-for="(q, index) in tk" class="m-choicebox" ><a :name="'a' + q.qid" class="target"></a>
          <h4>第  {{index + 1}}  题：
            <question :data="q"></question>
            <p v-if="q.question.image != null && q.question.image?.trim() !== ''"><img :src="q.question.image"/></p>
          </h4>
          <p v-if="q.tf === 0" style="color: indianred; margin-top: 8px; font-size: 20px">{{q.question.ideas}}</p>
          <div class="clearfix"></div>
        </div>

        <br/>
        <b class="b1 bb1"></b><b class="b2 bb2"></b><b class="b3 bb2"></b>


<!--        单选题-->
        <div class="bc bb2">
          <div class="bt bb3 bc-h03">第二部分：  单选题（每题{{paper.dk}}分,共{{paper.dk * dk.length}}分）</div>
        </div>
        <b class="b3 bb2"></b><b class="b2 bb2"></b><b class="b1 bb1"></b>
        <div class="m-choicebox" v-for="(q, index) in dk"><a :name="q.qid" class="target"></a>
          <h4>第  {{index + 1}}  题：
            <p>{{q.question.content}}</p>
            <p v-if="q.question.image != null && q.question.image?.trim() !== ''"><img :src="q.question.image"/></p>
          </h4>
          <ul class="single">
            <li class="question-option-list"><span>A．</span>
              <div class="option-content">{{q.question.items.split(";")[0]?.replace(/^\$/, '')}}</div>
            </li>
            <li class="question-option-list"><span>B．</span>
              <div class="option-content">{{q.question.items.split(";")[1]?.replace(/^\$/, '')}}</div>
            </li>
            <li class="question-option-list"><span>C．</span>
              <div class="option-content">{{q.question.items.split(";")[2]?.replace(/^\$/, '')}}</div>
            </li>
            <li class="question-option-list"><span>D．</span>
              <div class="option-content">{{q.question.items.split(";")[3]?.replace(/^\$/, '')}}<br/>
              </div>
            </li>
          </ul>
          <div class="m-checkBox single"><a  class="question-btn 5876" :id="'lblA' + q.qid">

            <label :for="'rdA' + q.qid">
              <input disabled type='radio' :value="q.question.items.split(';')[0]?.replace(/^\$/, '')" :name="'rd' + q.qid"  :id="'rdA' + q.qid"/>
              &nbsp;&nbsp;A</label>
          </a><a  class="question-btn 5876" :id="'lblB' + q.qid">

            <label :for="'rdB' + q.qid">
              <input disabled type='radio' :value="q.question.items.split(';')[1]?.replace(/^\$/, '')"  :name="'rd' + q.qid"  :id="'rdB' + q.qid"/>
              &nbsp;&nbsp;B</label>
          </a><a  class="question-btn 5876" :id="'lblC' + q.qid">

            <label :for="'rdC' + q.qid">
              <input disabled type='radio' :value="q.question.items.split(';')[2]?.replace(/^\$/, '')"  :name="'rd' + q.qid"  :id="'rdC' + q.qid"/>
              &nbsp;&nbsp;C</label>
          </a><a  class="question-btn 5876" :id="'lblD' + q.qid">

            <label :for="'rdD' + q.qid">
              <input disabled type='radio' :value="q.question.items.split(';')[3]?.replace(/^\$/, '')"  :name="'rd' + q.qid"  :id="'rdD' + q.qid"/>
              &nbsp;&nbsp;D</label>
          </a></div>
          <div class="clearfix"></div>
          <p v-if="q.tf === 0" style="color: indianred; margin-top: 8px; font-size: 20px">{{q.question.ideas}}</p>
        </div>

        <br/>
        <b class="b1 bb1"></b><b class="b2 bb2"></b><b class="b3 bb2"></b>


<!--        多选题-->
        <div class="bc bb2">
          <div class="bt bb3 bc-h03">第三部分：  多选题（每题{{paper.dxs}}分,共{{paper.dxs * dxs.length}}分）</div>
        </div>
        <b class="b3 bb2"></b><b class="b2 bb2"></b><b class="b1 bb1"></b>
        <div class="m-choicebox" v-for="(q, index) in dxs"><a :name="q.qid" class="target"></a>
          <h4>第  {{index+1}}  题：
            <p style="text-align:left;">{{q.question.content}}</p>
            <p v-if="q.question.image != null && q.question.image?.trim() !== ''"><img :src="q.question.image"/></p>
          </h4>
          <ul class="single">
            <li class="question-option-list"><span>A．</span>
              <div class="option-content">{{q.question.items.split(";")[0]?.replace(/^\$/, '')}}</div>
            </li>
            <li class="question-option-list"><span>B．</span>
              <div class="option-content">{{q.question.items.split(";")[1]?.replace(/^\$/, '')}}</div>
            </li>
            <li class="question-option-list"><span>C．</span>
              <div class="option-content">{{q.question.items.split(";")[2]?.replace(/^\$/, '')}}</div>
            </li>
            <li class="question-option-list"><span>D．</span>
              <div class="option-content">{{q.question.items.split(";")[3]?.replace(/^\$/, '')}}<br/>
              </div>
            </li>
          </ul>
          <div class="m-checkBox single"><a  class="question-btn 6719" :id="'lblA' + q.qid">
            <label :for="'rdA' + q.qid">
              <input disabled type='checkbox' :value="q.question.items.split(';')[0]?.replace(/^\$/, '')"  :name="'rd' + q.qid"  :id="'rdA' + q.qid"/>
              &nbsp;&nbsp;A</label>
          </a><a  class="question-btn 6719" :id="'lblB' + q.qid">
            <label :for="'rdB' + q.qid">
              <input disabled type='checkbox' :value="q.question.items.split(';')[1]?.replace(/^\$/, '')"  :name="'rd' + q.qid"  :id="'rdB' + q.qid"/>
              &nbsp;&nbsp;B</label>
          </a><a  class="question-btn 6719" :id="'lblC' + q.qid">
            <label :for="'rdC' + q.qid">
              <input disabled type='checkbox' :value="q.question.items.split(';')[2]?.replace(/^\$/, '')" :name="'rd' + q.qid"  :id="'rdC' + q.qid"/>
              &nbsp;&nbsp;C</label>
          </a><a  class="question-btn 6719" :id="'lblD' + q.qid">
            <label :for="'rdD' + q.qid">
              <input disabled type='checkbox' :value="q.question.items.split(';')[3]?.replace(/^\$/, '')"  :name="'rd' + q.qid"  :id="'rdD' + q.qid"/>
              &nbsp;&nbsp;D</label>
          </a></div>
          <div class="clearfix"></div>
          <p v-if="q.tf === 0" style="color: indianred; margin-top: 8px; font-size: 20px">{{q.question.ideas}}</p>
        </div>
        <br/>
        <b class="b1 bb1"></b><b class="b2 bb2"></b><b class="b3 bb2"></b>


<!--        判断题-->
        <div class="bc bb2">
          <div class="bt bb3 bc-h03">第四部分：  判断题（每题{{paper.pd}}分,共{{paper.pd * pd.length}}分）</div>
        </div>
        <b class="b3 bb2"></b><b class="b2 bb2"></b><b class="b1 bb1"></b>
        <div class="m-choicebox" v-for="(q, index) in pd"><a :name="q.qid" class="target"></a>
          <h4>第  {{index+1}}  题：
            <p>{{q.question.content}}</p>
            <p v-if="q.question.image != null && q.question.image?.trim() !== ''"><img :src="q.question.image"/></p>
          </h4>
          <ul class="single">
            <li class="question-option-list"><span>A．</span>
              <div class="option-content">正确</div>
            </li>
            <li class="question-option-list"><span>B．</span>
              <div class="option-content">错误<br/>
              </div>
            </li>
          </ul>
          <div class="m-checkBox single"><a  class="question-btn 15485" :id="'lblA' + q.qid">
            <label :for="'rdA' + q.qid">
              <input disabled type='radio' value="true"  :name="'rd' + q.qid"  :id="'rdA' + q.qid"/>
              &nbsp;&nbsp;A</label>
          </a><a  class="question-btn 15485" :id="'lblB' + q.qid">
            <label :for="'rdB' + q.qid">
              <input disabled type='radio' value="false"  :name="'rd' + q.qid"  :id="'rdB' + q.qid"/>
              &nbsp;&nbsp;B</label>
          </a></div>
          <br>
          <div class="clearfix"></div>
          <p v-if="q.tf === 0" style="color: indianred; margin-top: 8px; font-size: 20px">{{q.question.ideas}}</p>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

<script>
  // 使用vue自定义组件实现考卷的显示与使用
  Vue.component("question",{
    props:["data"],
    template: `
          <div style="position: relative">
                <div v-html="rendTk(data.question.content, data.qid)"></div>
          </div>
        `,
    methods:{
      //填空题
      rendTk(content, id){
        content = content.replaceAll(/_+/g, `<input disabled name="${'rd' + id}">`);
        return content;
      }
    },
    mounted() {

    }
  });


  var v = new Vue({
    el:"#app",
    data:{
      user: null,
      uid: '',
      cid: '',
      pid: '',
      classinfo: {},
      paper: {},
      tk: [],     //填空题
      dk: [],     //单选题
      dxs: [],    //多选题
      pd: [],      //判断题
      image: '',
      exam: null
    },
    watch: {
      user(newVal, oldVal) {
        if (newVal !== oldVal) {
          const url = window.location.href;
          const urlObject = new URL(url);
          this.cid = urlObject.searchParams.get('cid');
          this.pid = urlObject.searchParams.get('pid');
          this.uid = urlObject.searchParams.get('uid');
          this.getclass();
          this.get();
          this.getexamdetail();
        }
      }
    },
    methods:{
      //获取用户信息
      myinfo(){
        var jwt = sessionStorage.getItem("jwt");
        if(jwt == null || jwt == ""){
          location.href = "login.html";
          return;
        }
        axios.get("cloud-user/myinfo",{
          headers:{
            Authorization: jwt
          }
        }).then(res=>{
          if(res.data.code == 1){
            this.user = res.data.data;
          }else{
            location.href = "login.html";
          }
        })
      },
      //获取班级个人信息
      getclass(){
        //获取班级信息
        axios.get("cloud-other/classs/classinfo?cid=" + this.cid + "&uid=" + this.uid).then(res=>{
          if(res.data.code === 1){
            this.classinfo = res.data.data;
          }
        });
        //获取头像
        axios.get("cloud-user/user/getimage?uid=" + this.uid).then(res=>{
          this.image = res.data;
        });
      },
      //获取试卷信息
      get(){
        axios.get("cloud-other/exam/getcid?pid=" + this.pid + "&uid=" + this.uid + "&cid=" + this.cid).then(res=>{
          this.exam = res.data;
        axios.get("cloud-other/paper/get?id=" + this.pid).then(res=>{
          this.paper = res.data;
            this.paper.details.forEach(data=>{
              let eDetail = this.exam.details.find(ed=> ed.question.id == data.question.id);
              data.question.eDetail = eDetail;
            });
            this.setValue();
          });
          this.exam.details.forEach(data=>{
            if(data.question.type === '填空题'){
              this.tk.push(data);
            }else if(data.question.type === '单选题'){
              this.dk.push(data);
            }else if(data.question.type === '多选题'){
              this.dxs.push(data);
            }else if(data.question.type === '判断题'){
              this.pd.push(data);
            }
          });
        });
      },
      //获取答卷信息
      setValue() {
        this.exam.details.forEach(detail=>{
          //通过题目id，使用组件的name属性获取到元素
          let inputs = document.getElementsByName("rd" + detail.qid);
          for (let i = 0; i < inputs.length; i++) {
            if(detail.question.type == "填空题"){
              var s1 = detail.answer.split(";");
              inputs[i].value = s1[i];
            }
            if(detail.question.type.endsWith("选题")){
              var s1 = detail.answer.split(";");
              s1[i] == " " ? "" : inputs[i].checked = true;
            }
            if(detail.question.type == "判断题"){
              if(detail.answer.includes(";")){
                inputs[1].checked = true;
              }else{
                inputs[0].checked = true;
              }
            }
          }
        });
      },
      getexamdetail() {

      }
    },
    created(){
      //获取用户信息
      this.myinfo();
    },
    computed: {
      examEndTime() {
        return this.paper && this.paper.end ? this.paper.end.toString().substring(0, 16) : '未知';
      }
    }

  })
</script>

</body>
</html>
